<template>
<div id="OrderPc" class="container-fluid">
  <div class="row">
      <div class="col-md-4 col-lg-2 sidebar">
        <div class="panel panel-default">
          <div class="panel-heading clearfix">
            <span class="h2">{{tab_num}}<small> 号桌 点菜</small></span>
            <span class="btn btn-default btn-sm pull-right" @click="back">返回</span>
          </div>
          <div class="panel-body">
            <div class="main">
              <table class="table">
                <thead>
                    <tr>
                      <th>#</th>
                      <th>菜品</th>
                      <th class="text-center" width="40%">数量</th>
                    </tr>
                </thead>
                <tbody>
                  <tr :key="index" v-for="(i,index) in Added">
                    <td>{{Added.length-index}}</td>
                    <td>{{i.name}}</td>
                    <td class="text-center">
                      <a @click="i.num++" href="javascript:;" class="increase_menu_item pull-left">
                        <h4 class="glyphicon glyphicon-plus-sign text-danger"></h4>
                      </a>  
                      <a @click="i.num--" href="javascript:;" class="remove_menu_item pull-right">
                        <h4 class="glyphicon glyphicon-minus-sign text-danger"></h4>
                      </a> 
                      <h4><a href="javascript:;">{{i.num}}</a></h4>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div>
          <span @click="confirm" class="btn btn-warning btn-block btn-lg">确认下单 ￥{{total}}</span>  
        </div>  
      </div>
      <div class="col-md-8 col-lg-10">
        <ul class="nav nav-pills nav-justified">
          <li @click="tabindex = index" :key="i.group_id" v-for="(i,index) in menuList" :class="{active:index==tabindex}">
            <a>
              {{i.name}}
              <span class="label label-warning" v-if="classNum(i)>0">{{classNum(i)}}</span>
            </a>
          </li>           
        </ul>
        <hr>
        <div class="row">
          <div @click="i.num++" :key="i.shop_id" v-for="i in menuList[tabindex].menu" class="menu col-md-3 col-lg-2">
            <div class="btn btn-default btn-block">
              <h4>{{i.name}} 
                <div class="menu_count badge" v-if="i.num>0">{{i.num}}</div>
                <div><small class="text-danger">库存 {{i.stock}}</small></div>
              </h4>
            </div>
          </div>
        </div>
      </div>
  </div>
</div>
</template>
<script>
import { axios, accAdd, accMul, openWindow } from "@/static/js/utils";
export default {
  name: "OrderPc",
  data() {
    return {
      menuList: [{ menu: [] }],
      tabindex: 0
    };
  },
  computed: {
    Added() {
      let list = [];
      this.menuList.forEach(item => {
        item.menu.forEach(val => {
          if (val.num > 0) {
            list.unshift(val);
          }
        });
      });
      return list;
    },
    total() {
      let total = 0;
      this.Added.forEach(item => {
        total = accAdd(total, accMul(item.price, item.num));
      });
      return total.toFixed(2);
    }
  },
  methods: {
    classNum(i) {
      let classNum = 0;
      i.menu.forEach(item => {
        classNum += item.num;
      });
      return classNum;
    },
    confirm() {
      const id = plus.webview.currentWebview().desk_id;
      const order_id = plus.webview.currentWebview().order_id;
      const type = JSON.parse(localStorage.getItem("userData"));
      if (this.Added.length > 0) {
        if (type == 1) {
          axios
            .post("menu/create", {
              id,
              order_id,
              menu: this.Added
            })
            .then(res => {
              if (res.data.code) {
                console.log(res.data);
                this.back();
              }
            });
        } else {
          axios
            .post("menu/create_action", {
              order_id,
              menu: this.Added
            })
            .then(res => {
              if (res.data.code) {
                openWindow("Settlement.html", "结账", {
                  order_id: order_id
                });
              }
            });
        }
      }
    },
    back() {
      mui.back();
    }
  },
  created() {
    this.tab_num = plus.webview.currentWebview().tab_num;
    axios.get("menu/index").then(res => {
      res.data.data.map(item => {
        item.menu.map(val => {
          val.num = 0;
          return val;
        });
        return item;
      });
      this.menuList = res.data.data;
      this.$set(this.menuList, this.tabindex, this.menuList[this.tabindex]);
    });
  }
};
</script>
<style scoped>
.nav-pills > li.active > a,
.nav-pills > li.active > a:focus,
.nav-pills > li.active > a:hover {
  background-color: #bc2923;
}
.main {
  height: 78vh;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.panel {
  height: 88vh;
}
.menu > .btn {
  position: relative;
}
.menu_count {
  background-color: #bc2923;
  position: absolute;
  right: -5px;
  top: -5px;
  color: #fff;
}
</style>

